<template>
  <div class="origin-info" v-loading="loading">
    <!-- <merchantNum class="merchant-num" /> -->
    <plainTable
      :tableData="tableDataDisplay"
      :tableConfigData="tableConfigData"
      @onCheckCost="onClickCheckHost"
      @controlUse="onClickControlUse"
      :pageInfo="pageInfo"
      @prevPage="prevPage"
      @nextPage="nextPage"
    />
    <el-dialog v-model="costCheckDialogVisible" width="80%" class="my-dialog">
      <plainTable
        :tableData="costCheckDialogTableData"
        :tableConfigData="costCheckDialogTableConfigData"
      />
    </el-dialog>
  </div>
</template>

<script setup>
import merchantNum from "@/components/merchantNum.vue";
import plainTable from "@/components/plainTable.vue";
import { ref } from "vue";
import { useOriginInfo } from "@/hooks/backStage";

const {
  pageInfo,
  prevPage,
  nextPage,
  setTableConfigData,
  toggleStatus,
  loading,
  tableConfigData,
  tableDataDisplay,
  costCheckDialogTableConfigData,
  costCheckDialogTableData,
} = useOriginInfo();
const costCheckDialogVisible = ref(false);
// 弹窗查看费用弹窗
const onClickCheckHost = (row) => {
  clog("当前行数据:", row);
  setTableConfigData(row);
  costCheckDialogVisible.value = true;
};
// 点击操作
const onClickControlUse = (row) => {
  clog("当前行数据:", row);
  toggleStatus(row);
};
</script>
<style scoped lang="scss">
.merchant-num {
  margin-bottom: 56px;
}
:deep(.my-dialog) {
  .plain-table {
    box-shadow: unset;
  }
}
</style>
